<template>
  <div class="container-app">
  	<h1>欢迎来到科技成果转化平台管理！</h1>
  </div>
</template>
<script>

export default {
  data() {
    return {
      oftenMenu: [
        { name: '部门管理', icon: 'user', url: '/systemManagement/departmentManagement' }
      ],
      tasks: '',
      notice: [
        { title: '测试测试', url: 'http://www.baidu.com' },
        { title: '测试测试1', url: 'http://www.baidu.com' }
      ],
      time: '2019-01-01 10:20'
    }
  },
  mounted() {
    this.setMapHeight()
  },
  methods: {
    setMapHeight() {
      var height = document.getElementsByClassName('main-container')[0].scrollHeight
      document.getElementsByClassName('app-main')[0].style.height = `${height - 86}px`
    }
  }
}
</script>
<style scoped>
.container-app {
  background-color: #EEEFF3;
	position: relative;
	padding: 30px;
}
.container-app label {
	background: white;
	width: 100%;
	display: block;
  font-weight: 300;
  border-bottom: 1px solid #EEEFF3;
  padding: 12px;
}
.container-app,.amap-page-container{
	height: 100%;
}
.container-app .panel {
  height: 100%;
}
.container-app .panel-top .panel > div {
  height: calc(100% - 45px);
  background: white;
  padding: 8px;
}
.container-app .panel.workbench > div {
  height: 100%;
}
.container-app .panel.statistic > div {
  height: calc(100% - 45px);
  background: white;
}
.panel-top,.panel-bottom {
	vertical-align: top;
	padding: 12px;
}
.panel-top {
  height: 45%;
}
.panel-bottom {
  height: 55%;
  padding-top: 0px;
}
.panel-top .panel,
.panel-bottom .panel{
	display: inline-block;
  vertical-align: top;
}
.panel-top .menu-often,
.panel-top .water,
.panel-top .notice {
  width: 33.3333333333%;
  padding: 4px;
}

.panel-top .menu-often .muneItem {
  padding: 9px;
  display: inline-block;
  width: 80px;
  text-align: center;
  font-size: 14px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.panel-top .menu-often .muneItem:hover {
  background-color: #C1E7FF;
}
.panel-top .menu-often .muneIcon {
  font-size: 49px;
  border-radius: 50%;
  text-align: center;
  color: white;
  background-color: orange;
  margin-bottom: 6px;
}

.panel-top .water,
.panel-top .notice {
  margin-left: -5px;
  padding-left: 9px;
}

.panel-bottom .workbench,
.panel-bottom .statistic {
  padding: 4px;
}

.panel-bottom .workbench {
  width: 66.6666666666%;
}
.panel-bottom .workbench .el-tabs{
  box-shadow: none;
  border: none;
}

.panel-bottom .statistic {
  padding-left: 9px;
  margin-left: -5px;
  width: 33.3333333333%;
}
.notice-item {
  padding: 12px;
  font-size: 12px;
  display: block;
  border-bottom: 1px solid #EEEFF3;
}
.notice-item > div {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #03B594;
  border-radius: 50%;
  margin-right: 6px;
}
.notice-item > div > div{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: 2px;
  left: 2px;
}
</style>

